<template>
  <div class="header-box">
    <div class="header-left">
      <div>资产与仓库BI</div>
      <div>Asset and Warehouse BI</div>
    </div>
    <div class="header-center">
      <div :class="active == 1 ? 'active' : ''" @click="changeType(1)">
        数量
      </div>
      <div :class="active == 2 ? 'active' : ''" @click="changeType(2)">
        金额
      </div>
    </div>
    <div class="header-right">{{ times }}</div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      active: 1,
      times: "",
    };
  },
  created() {
    this.getTimes();
  },
  methods: {
    changeType(flag) {
      this.active = flag;
      this.$emit("changeType", flag);
    },
    getTimes() {
      setInterval(this.getTimesInterval, 1000);
    },
    getTimesInterval: function () {
      let _this = this;
      let year = new Date().getFullYear(); //获取当前时间的年份
      let month = new Date().getMonth() + 1; //获取当前时间的月份
      let day = new Date().getDate(); //获取当前时间的天数
      let hours = new Date().getHours(); //获取当前时间的小时
      let minutes = new Date().getMinutes(); //获取当前时间的分数
      let seconds = new Date().getSeconds(); //获取当前时间的秒数
      //当小于 10 的是时候，在前面加 0
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      //拼接格式化当前时间
      _this.times =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
    },
  },
  beforeDestroy() {
    if (this.times) {
      clearInterval(this.getTimesInterval);
    }
  },
};
</script>
<style lang="scss" scoped>
.header-box {
  height: 6vh;
  display: flex;
  justify-content: space-between;
  padding: 0 32px;
  background: #ffffff;
  > div {
    flex-grow: 1;
    width: calc(100vw / 3);
  }
  .header-left {
    font-weight: bold;
    font-size: 20px;
    color: #0053fa;
    line-height: 23px;
    letter-spacing: 2px;
    font-style: normal;
    text-transform: none;
    align-self: center;
    div:nth-child(2) {
      font-weight: 400;
      font-size: 12px;
      color: #9a9a9a;
      line-height: 14px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  .header-center {
    display: flex;
    margin: 0 auto;
    justify-content: center;
    font-weight: 400;
    font-size: 16px;
    color: #666666;
    div {
      padding: 0 32px;
      line-height: 5vh;
      cursor: pointer;
    }
    .active {
      background: linear-gradient(
        180deg,
        rgba(0, 79, 250, 0.2) 0%,
        rgba(0, 79, 250, 0) 100%
      );
      border-top: #004ffa 4px solid;
    }
  }
  .header-right {
    text-align: right;
    color: #666666;
    line-height: 6vh;
  }
}
</style>
